<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据参数对比工具 - v1.0.0</title>
    <style>
        body {
            font-size: 14px;
        }

        .d-flex {
            display: flex
        }

        .col {
            width: 500px
        }

        .col-50p {
            width: 50%;
        }

        textarea {
            width: 100%;
            height: 100px;
        }

        table {
            border-collapse: collapse;
            border-right: #CCC 1px solid;
            border-bottom: #CCC 1px solid;
            width: 100%
        }

        table th,
        td {
            border-left: #CCC 1px solid;
            border-top: #CCC 1px solid;
            padding: 2px 5px;
        }

        table tr:nth-child(even) {
            background-color: #efefef;
        }
    </style>
</head>

<body>
    <div class="d-flex">
        <div class="col">
            <h5>PC</h5>
            <textarea placeholder="输入链接地址"></textarea>
            <button>格式化</button>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Value</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div class="col">
            <h5>MP</h5>
            <textarea placeholder="输入链接地址"></textarea>
            <button>格式化</button>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Value</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        document.querySelectorAll('button').forEach(elBtn => {
            elBtn.addEventListener('click', function (evt) {
                let elInput = evt.target.previousElementSibling;
                let elTable = evt.target.nextElementSibling;
                let queryString = elInput.value.trim();
                if (queryString.indexOf('?') > -1) {
                    queryString = queryString.substring(queryString.indexOf('?') + 1);
                }
                let kvArr = [], data = [], html = '';
                queryString.split('&').forEach(kvStr => {
                    kvArr = kvStr.split('=', 2);
                    data.push([kvArr[0], kvArr[1]])
                })
                // [JavaScript字符串比较方法有哪些](https://m.php.cn/article/478174.html)
                data.sort((a, b) => {
                    return a[0].localeCompare(b[0]);
                })
                data.forEach(item => {
                    html += '<tr><td>' + item[0] + '</td><td>' + (item[1] || '') + '</td></tr>'
                })
                elTable.tBodies[0].innerHTML = html;

            })
        })
    </script>
</body>

</html>